import { pageCuesActive } from '@/services/api/api-cues-active';
import { searchTreeOrganization } from '@/services/api/api-cues-submit';
import { FileImageOutlined, PaperClipOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProList } from '@ant-design/pro-components';
import { Space, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import DetailsActive from './DetailsActive';
import moment from 'moment';
import { findTagColor } from '@/utils/findTagColor';
import EditActive from './EditActive';

interface submitListProps {
    onRefurbish: () => void;
  }
const CuesSubmitList: React.FC<submitListProps> = ({onRefurbish}) => {
    const actionRef = useRef<ActionType>();
    /**
       * 搜索参数
       */
    const [queryParam, setQueryParamState] = useState({});
    const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

    /**
 * 加载 单位 列表
 * @param key
 */
    const treeOrganizationData = async () => {
        try {
            const response = await searchTreeOrganization();
            if (response.code === 0) {
                setArticleOrganizationState(response.data);
            }
        } catch (error) { }
    };
    useEffect(() => {
        treeOrganizationData();
    }, []);

    return (
        <ProList
            rowKey="id"
            headerTitle="线索池"
            showActions="hover"
            actionRef={actionRef}
            request={async (params = {}) => {
                if (params.organizationIds) {
                    const organizationParentIds: string[] = [];
                    let organizationIds: string[] = [];

                    params.organizationIds.forEach((item: string | any[]) => {
                        if (item.length === 1) {
                            organizationParentIds.push(item[0]);
                        } else if (item.length > 1) {
                            organizationIds.push(item[1]);
                        }
                    });
                    organizationParentIds.forEach((id) => {
                        const ids = articleOrganizations.find((item) => item.id === id).children;
                        organizationIds = organizationIds.concat(ids.map((item: any) => item.id));
                    });
                    params.articleOrganizationIds = organizationIds;
                }

                const response = await pageCuesActive({
                    createdSource: 1,
                    ...queryParam,
                    ...params,
                });

                return Promise.resolve({
                    data: response.data.data,
                    total: response.data.total,
                    success: response.code === 0,
                });
            }}
            showActions="hover"
            editable={{
                onSave: async (key, record, originRow) => {
                    console.log(key, record, originRow);
                    return true;
                },
            }}
            pagination={{
                showSizeChanger: false,
                simple: true,
                pageSize: 6
            }}
            toolbar={{
                search: {
                    onChange: (e) => {
                        setQueryParamState({ ...queryParam, articleName: e.target.value });
                    },
                    onSearch: (value) => {
                        actionRef.current?.reset();
                    },
                },
            }}
            metas={{
                title: {
                    dataIndex: 'articleName',
                    render: (dom, record, _index, action) => {
                        return (
                            <div
                                style={{
                                    textAlign: 'left',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap',
                                    overflow: 'hidden',
                                    width: 300
                                }}
                            >
                                {record.isImage === 1 ? <FileImageOutlined /> : <></>}
                                {record.isFile === 1 ? <PaperClipOutlined /> : <></>}
                                <DetailsActive
                                    id={record.id}
                                    name={record.articleName}
                                    onRefurbish={() => {
                                        actionRef?.current?.reload();
                                    }}
                                />
                            </div>
                        );
                    },
                },
                avatar: {
                    dataIndex: 'articleOrganizationAvatar',
                    editable: false,
                },
                description: {
                    dataIndex: 'desc',
                },
                // subTitle: {
                //     render: () => {
                //         return (
                //             <Space size={0}>
                //                 <Tag color="blue">Ant Design</Tag>
                //                 <Tag color="#5BD8A6">TechUI</Tag>
                //             </Space>
                //         );
                //     },
                // },
                actions: {
                    render: (text, row, index, action) => [
                        <EditActive
                            id={row.id}
                            onRefurbish={() => {
                                actionRef.current?.reload();
                                onRefurbish()
                            }} />
                    ],
                },
            }}
        />
    );
};
export default CuesSubmitList;